import React from 'react';
import { Layout, Typography } from 'antd';
import { useNavigate } from 'react-router-dom';
import { FireOutlined, SafetyOutlined } from '@ant-design/icons';
import AnimatedButton from '../components/AnimatedButton';
import AnimatedText from '../components/AnimatedText';
import LegalParticlesBackground from '../components/LegalParticlesBackground';
import LegalDecorations from '../components/LegalDecorations';
import LegalCard from '../components/LegalCard';

const { Content } = Layout;
const { Title } = Typography;

const GameSelect = () => {
  const navigate = useNavigate();

  const gameOptions = [
    { 
      id: 'civil', 
      label: '民法游戏',
      icon: <SafetyOutlined />,
      description: '通过回答民事法律问题挑战Boss，探索物权、合同、婚姻家庭等法律领域'
    },
    { 
      id: 'criminal', 
      label: '刑法游戏',
      icon: <FireOutlined />,
      description: '刑法领域的冒险旅程，通过回答刑法问题击败强大的Boss（即将推出）'
    }
  ];

  const handleSelect = (gameType) => {
    if (gameType === 'civil') {
      navigate('/style-select');
    } else {
      // 刑法游戏暂未实现
      alert('刑法游戏开发中，敬请期待！');
    }
  };

  return (
    <Layout className="law-adventure-layout">
      {/* 粒子背景 */}
      <LegalParticlesBackground type="adventureSparks" />
      
      {/* 装饰元素 */}
      <LegalDecorations type="floatingScales" />
      <LegalDecorations type="floatingGavel" />
      
      <Content style={{ 
        padding: '50px 24px', 
        minHeight: '100vh',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        position: 'relative',
        zIndex: 1
      }}>
        <AnimatedText
          text="请选择游戏类型"
          type="slideDown"
          fontSize="36px"
          fontWeight="600"
          fontFamily="var(--title-font)"
          color="var(--primary-color)"
          textAlign="center"
          style={{ marginBottom: '40px' }}
        />
        
        <div style={{ maxWidth: 600, margin: '0 auto', width: '100%' }}>
          {gameOptions.map((game, index) => (
            <LegalCard
              key={game.id}
              style={game.id === 'civil' ? 'legal' : 'adventure'}
              hoverable={true}
              title={
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <span style={{ marginRight: '10px', fontSize: '24px' }}>{game.icon}</span>
                  {game.label}
                </div>
              }
            >
              <AnimatedText
                text={game.description}
                type="fade"
                delay={0.3 + index * 0.2}
                style={{ marginBottom: '20px', color: game.id === 'criminal' ? 'var(--adventure-color)' : 'var(--primary-color)' }}
              />
              
              <div style={{ textAlign: 'center', marginTop: '20px' }}>
                <AnimatedButton 
                  style={game.id === 'civil' ? 'legal' : 'adventure'}
                  type={game.id === 'civil' ? 'primary' : 'default'}
                  onClick={() => handleSelect(game.id)}
                  disabled={game.id === 'criminal'}
                >
                  {game.id === 'civil' ? '开始民法冒险' : '敬请期待'}
                </AnimatedButton>
              </div>
            </LegalCard>
          ))}
          
          <div style={{ textAlign: 'center', marginTop: '40px' }}>
            <AnimatedButton
              style="scroll"
              type="default"
              onClick={() => navigate('/')}
            >
              返回首页
            </AnimatedButton>
          </div>
        </div>
      </Content>
    </Layout>
  );
};

export default GameSelect;
